<%@ page import="pojo.Point" %>
<%@ page import="java.util.List" %>
<%--
  Created by IntelliJ IDEA.
  User: 21131
  Date: 2023/11/25
  Time: 14:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>考试界面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /*试卷名*/
        h2 {
            text-align: center;
        }

        /*整张试卷*/
        .shijuan {
            text-align: center;
            display: inline-block;
            width: 60%;
            background-color: whitesmoke;
            margin-left: 6%;
            margin-right: 15%;
        }

        /*一道考题*/
        .kaoti {
            padding-left: 0;
            text-align: left;
            margin-top: 5px;
        }

        /*分值和题型*/
        span {
            color: #8c8c8c;
        }

        /*答题卡样式*/
        .answer {
            /*background-color: #428bca;*/
            width: 25%;
            float: left;
            margin-left: 70%;
            display: inline-block;
            position: fixed;
            border: 1px black solid;
        }

        /*答题卡的标题*/
        .title {
            display: inline-block;
            background-color: #66afe9;
            width: 49%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            border-bottom: solid 1px;
            border-right: solid 1px;
        }

        /*倒计时*/
        #time {
            display: inline-block;
            color: red;
            width: 49%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            border-bottom: solid 1px black;
        }

        /*答题框*/
        .datikuang {
            width: 40px;
            height: 33px;
            /*border: 1px solid black;*/
            margin-left: 4%;
            margin-top: 2%;
            text-align: center;
            display: inline-block;
        }

        /*试卷的选项*/
        .xuanxiang {
            padding-left: 15px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        ul, li {
            list-style: none;
        }

        /*答题卡的框背景颜色改变*/
        .hasBeenAnswer {
            background-color: forestgreen;
            color: whitesmoke;
        }

        /*答题框的内容，每个选项*/
        ul li a {
            width: 40px;
            height: 33px;
            line-height: 33px;
            text-decoration: none;
            color: black;
            border: 1px solid black;
            margin-left: 4%;
            margin-top: 2%;
            margin-bottom: 2%;
            text-align: center;
            display: inline-block;
        }

        .timu {
            margin-top: 3px;
            font-size: 20px;
        }

        /*提交试卷的按钮*/
        .tijiao {
            height: 40px;
            width: 80px;
            background-color: #66afe9;
            margin-left: 40%;
            margin-top: 2%;
            margin-bottom: 1%;
        }

        /* 遮罩层 */
        #overlay {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            font-size: 16px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        /* 弹出框主体 */
        .popup {
            background-color: #ffffff;
            max-width: 400px;
            min-width: 200px;
            height: 240px;
            border-radius: 5px;
            margin: 100px auto;
            text-align: center;
        }

        /* 弹出框的标题 */
        .popup_title {
            height: 60px;
            line-height: 60px;
            border-bottom: solid 1px #cccccc;
            font-size: 25px;
        }

        /* 弹出框的按钮栏 */
        .popup_btn {
            padding-top: 50px;
            padding-bottom: 10px;
        }

        /* 弹出框的按钮 */
        .popup_btn button {
            color: #778899;
            width: 30%;
            height: 60px;
            cursor: pointer;
            border: solid 1px #cccccc;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: #337ab7;
        }

        button a {
            color: #778899;
            width: 100%;
            height: 100%;
            color: #ffffff;
            background-color: #337ab7;
            font-size: 25px;
        }
    </style>
</head>
<body>
<%--答题卡--%>
<div class="answer">
    <div class="title">答题卡</div>
    <div id="time">倒计时</div>
    <div>
        <ul>
            <%
                String s = session.getAttribute("sum").toString();//获取试卷的题目数量
                int sum = Integer.parseInt(s);
                int number = 1;
                String full_marks1 = session.getAttribute("full_marks").toString();//获取试卷的满分
                float full_marks = Float.parseFloat(full_marks1);
                for (; number <= sum; number++) {
            %>
            <li style="display: inline-block" class="datikuang">
                <a href="#ti<%=number%>"><%=number%>
                </a>
            </li>
            <% }
            %>
        </ul>
    </div>
    <div style="border-top: black solid 1px;margin-top: 5px">
        <input class="tijiao" type="submit" value="交卷">
    </div>
</div>
</div>
<div class="shijuan">
    <div style="border-bottom: 1px solid;margin-top: 1%;padding-bottom: 1%">
        <% String name = session.getAttribute("exam_name").toString();%>
        <h1><%=name%>
        </h1>
        <div style="color: rgba(15,0,12,0.94);">满分：<%=full_marks%>  &nbsp &nbsp &nbsp &nbsp &nbsp
            答卷人：${STUDENT_NAME}</div>
    </div>

    <div class="kaoti">
        <ul>
            <%--  学生参加考试的试卷的内容--%>
            <%
                List<Point> sc = (List<Point>) session.getAttribute("exam_contents");
                int flag = 1;
                number = 1;
                for (Point c : sc) {
            %>
            <li id="ti<%=number%>">
                <div class="timu">
                    <i><%=number%>.
                    </i><%=c.getQuestion().getQ_content()%><span>(<%=c.getQuestion().getQ_type()%>，分值为:<%=c.getMark()%>)</span><br>
                    <%--                    //传递题号--%>
                    <input name="tihao<%=number%>" style="display: none" value="<%=c.getQ_id()%>">
                </div>
                <%
                    if (c.getQuestion().getQ_type().trim().equals("单选题")) {//题型为单选题
                %>
                <div class="xuanxiang">
                    <ul>
                        <%--选项A--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="A"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                A.
                                <p style="display: inline;"><%=c.getQuestion().getOp_A()%>
                                </p>
                            </label>

                        </li>
                        <%--选项B--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="B"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                B.
                                <p style="display: inline;"><%=c.getQuestion().getOp_B()%>
                                </p>
                            </label>
                        </li>
                        <%--选项C--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="C"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                C.
                                <p style="display: inline;"><%=c.getQuestion().getOp_C()%>
                                </p>
                            </label>
                        </li>
                        <%--选项D--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="D"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                D.
                                <p style="display: inline;"><%=c.getQuestion().getOp_D()%>
                                </p>
                            </label>
                        </li>
                    </ul>
                </div>
                <%
                } else if (c.getQuestion().getQ_type().trim().equals("多选题")) {//题型为多选题
                %>
                <div class="xuanxiang">
                    <ul>
                        <%--选项A--%>
                        <li class="option">
                            <input type="checkbox" name="answer<%=number%>" value="A"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                A.
                                <p style="display: inline;"><%=c.getQuestion().getOp_A()%>
                                </p>
                            </label>
                        </li>
                        <%--选项B--%>
                        <li class="option">
                            <input type="checkbox" name="answer<%=number%>" value="B"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                B.
                                <p style="display: inline;"><%=c.getQuestion().getOp_B()%>
                                </p>
                            </label>
                        </li>
                        <%--选项C--%>
                        <li class="option">
                            <input type="checkbox" name="answer<%=number%>" value="C"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                C.
                                <p style="display: inline;"><%=c.getQuestion().getOp_C()%>
                                </p>
                            </label>
                        </li>
                        <%--选项D--%>
                        <li class="option">
                            <input type="checkbox" name="answer<%=number%>" value="D"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                D.
                                <p style="display: inline;"><%=c.getQuestion().getOp_D()%>
                                </p>
                            </label>
                        </li>
                    </ul>
                </div>
                <%
                } else if (c.getQuestion().getQ_type().trim().equals("判断题")) {//判断题
                %>
                <div class="xuanxiang">
                    <ul>
                        <%--选项A--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="A"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                A.
                                <p style="display: inline;"><%=c.getQuestion().getOp_A()%>
                                </p>

                            </label>
                        </li>
                        <%--选项B--%>
                        <li class="option">
                            <input type="radio" name="answer<%=number%>" value="B"
                                   id="option<%=flag%>"/>
                            <label for="option<%=flag++%>">
                                B.
                                <p style="display: inline;"><%=c.getQuestion().getOp_B()%>
                                </p>
                            </label>
                        </li>
                    </ul>
                </div>
                <%
                        }
                        number++;
                    }
                %>
            </li>
        </ul>
    </div>
</div>
<%--//倒计时结束弹出的窗口 --%>
<div id="overlay" style="display: none">
    <div class="popup">
        <p class="popup_title">考试时间到，请点击交卷按钮</p>
        <div class="popup_btn">
            <button class="confirmBtn"><a class="tijiao" style="color: #778899;
            width: 30%;
            height: 60px;
            cursor: pointer;
            border-radius: 5px;
            margin: 5px 10px;
            color: #ffffff;
            background-color: #337ab7;">交卷</a></button>
        </div>
    </div>
</div>

</body>
</html>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $(function () {
        //点亮答题卡对应的答题框
        $('li.option input').click(function () {
            var examId = $(this).closest('.xuanxiang').closest('li').attr('id'); // 得到题目ID
            var hasAnswer = $('a[href="#' + examId + '"]');
            // 答题卡对应选项框背景颜色改变即设置已答题
            if (!hasAnswer.hasClass('hasBeenAnswer')) {
                hasAnswer.addClass('hasBeenAnswer');
            }
        });
        //获取选中的选项
        $('.tijiao').click(function () {
            var respond = [];
            var ti_id = []
            for (var i = 1; i <= <%= sum %>; i++) {//获取选中的题号和选项
                var check = [];//存放选项
                var ti = [];//存放题号
                $("input[name='answer" + i + "']:checked").each(function (i) {	//遍历
                    check += $(this).val()
                })
                $("input[name='tihao" + i + "']").each(function (i) {	//遍历
                    ti += $(this).val()
                })
                ti_id.push(ti)
                respond.push(check);	//将我们遍历出来的值push到radio数组中
            }
            var json = []
            var array = {};
            for (var i = 0; i < ti_id.length; i++) {//将两个数组合成集合
                if (respond[i] == "") {
                    respond[i] = null;
                }
                array[ti_id[i]] = respond[i]
            }
            console.log(array)
            var json = JSON.stringify(array)//集合转json
            console.log(json)
            $.ajax({//传选项给controller
                type: "post",
                dataType: 'json',
                url: "${pageContext.request.contextPath }/SubmitAnswer",
                contentType: 'application/json',//json格式
                data: json,
                success: function (data) {
                    if (data == true) {//提交试卷成功
                        alert("提交成功")
                        window.location.replace("${pageContext.request.contextPath }/loadStudentExamList");//跳转到我的试卷的页面
                    } else {//还提交失败
                        alert("提交失败")
                    }
                }
            });
        });
    });
    //倒计时
    var countdownElement = document.getElementById('time');
    var endTime1 = '<%=session.getAttribute("end_time")%>';//该试卷的结束时间--%>
    if (endTime1 instanceof Date) {//Date类型
        endTime = endTime1.getTime();
    } else if (!isNaN(Date.parse(endTime1))) {//timestamp类型
        endTime = new Date(endTime1).getTime();
    } else {//格式错误
        console.error("Invalid date format:", endTime1);
    }

    function startCountdown() {
        var now = new Date(); // 获取当前时间
        var timeDiff = endTime - now; // 计算剩余时间的秒数
        if (timeDiff <= 0) {
            clearInterval(timer); // 倒计时结束，清除定时器
            countdownElement.innerHTML = "考试时间结束!";
            var overlay = document.getElementById("overlay");//显示弹窗
            overlay.style.display = "block";
        } else {
            var hours = Math.floor(timeDiff / 3600000); // 计算剩余小时数
            var minutes = Math.floor((timeDiff % 3600000) / 60000); // 计算剩余分钟数
            var seconds = Math.floor((timeDiff % 60000) / 1000); // 计算剩余秒数

            hours = (hours < 10) ? "0" + hours : hours;
            minutes = (minutes < 10) ? "0" + minutes : minutes;
            seconds = (seconds < 10) ? "0" + seconds : seconds;

            var countdownDisplay = hours + ":" + minutes + ":" + seconds;
            countdownElement.innerHTML = countdownDisplay;
        }
    }

    startCountdown(); // 首次调用更新倒计时
    var timer = setInterval(startCountdown, 1000); // 每秒调用一次更新倒计时
</script>